<template>
    <div class="ancient-layout">
        <el-container class="main-container">
            <!-- 古风顶部横幅 -->
            <el-header class="ancient-header">
                <div class="header-content">
                    <div class="greeting-section">
                        <div class="greeting-text">
                            <span class="welcome-prefix">您好</span>
                            <span class="user-name">{{ store.userInfo.userLickname }}</span>
                            <span class="user-title">{{ getRoleTitle(store.userInfo.roleName) }}</span>
                        </div>
                        <div class="decoration-line"></div>
                    </div>
                    <el-button @click="tc" class="logout-btn fresh-btn-danger">
                        <el-icon><Switch /></el-icon>
                        退出登录
                    </el-button>
                </div>
            </el-header>
            
            <el-container class="content-container">
                <!-- 古风侧边导航 -->
                <el-aside class="ancient-aside" width="280px">
                    <div class="nav-container">
                        <div class="nav-title">
                            <span class="title-text">功能菜单</span>
                            <div class="title-decoration"></div>
                        </div>
                        <el-menu 
                            class="ancient-menu"
                            :default-active="$route.path"
                            router
                            @open="handleOpen" 
                            @close="handleClose">
                            <el-menu-item index="/DefinitionShow" class="ancient-menu-item">
                                <el-icon class="menu-icon"><Location /></el-icon>
                                <span class="menu-text">流程设计列表</span>
                                <div class="item-decoration"></div>
                            </el-menu-item>
                            <el-menu-item index="/InstanceShow" class="ancient-menu-item">
                                <el-icon class="menu-icon"><Document /></el-icon>
                                <span class="menu-text">流程实例</span>
                                <div class="item-decoration"></div>
                            </el-menu-item>
                            <el-menu-item index="/AuditShow" class="ancient-menu-item">
                                <el-icon class="menu-icon"><Setting /></el-icon>
                                <span class="menu-text">我的待办</span>
                                <div class="item-decoration"></div>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-aside>
                
                <!-- 主要内容区域 -->
                <el-main class="ancient-main">
                    <div class="content-wrapper">
                        <RouterView />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import axios from 'axios'
import { useCounterStore } from '@/stores/counter'
import router from '@/router'
const store = useCounterStore()
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    Switch,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const tc=()=>{
    router.push('/');
    ElMessage.success("已退出");
}

// 角色称呼映射
const getRoleTitle = (roleName: string) => {
    const roleMap: Record<string, string> = {
        'admin': '管理员',
        'user': '用户',
        'manager': '主管',
        'developer': '开发者'
    }
    return roleMap[roleName] || roleName
}


</script>

<style scoped>
/* 动漫风格布局样式 */
.ancient-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fefb 0%, #f3faf6 100%);
  background-image: 
    /* 动漫风格渐变 */
    radial-gradient(circle at 20% 20%, rgba(79, 214, 112, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(125, 232, 156, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(168, 245, 192, 0.06) 0%, transparent 45%),
    /* 动漫装饰图案 */
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fd670' fill-opacity='0.03'%3E%3Cpath d='M50 20l5 15h15l-12 10 5 15-13-10-13 10 5-15-12-10h15z'/%3E%3Ccircle cx='20' cy='30' r='4'/%3E%3Ccircle cx='80' cy='70' r='3'/%3E%3Cpath d='M70 20c0-5 4-9 9-9s9 4 9 9-4 9-9 9-9-4-9-9z'/%3E%3Cpath d='M15 80c0-6 5-11 11-11s11 5 11 11-5 11-11 11-11-5-11-11z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    /* 樱花飘落效果 */
    url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff9eb5' fill-opacity='0.02'%3E%3Cpath d='M75 40c-3 0-5 2-5 5s2 5 5 5 5-2 5-5-2-5-5-5zm0 20c-6 0-10 4-10 10s4 10 10 10 10-4 10-10-4-10-10-10z'/%3E%3Cpath d='M30 100c-2 0-4 2-4 4s2 4 4 4 4-2 4-4-2-4-4-4z'/%3E%3Cpath d='M120 30c-3 0-5 2-5 5s2 5 5 5 5-2 5-5-2-5-5-5z'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  overflow-x: hidden;
}

/* 添加动漫风格的飘浮元素 */
.ancient-layout::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a8f5c0' fill-opacity='0.05'%3E%3Cpath d='M150 50l10 30h30l-25 20 10 30-25-20-25 20 10-30-25-20h30z'/%3E%3Ccircle cx='50' cy='200' r='8'/%3E%3Ccircle cx='250' cy='100' r='6'/%3E%3Cpath d='M200 250c0-15 12-27 27-27s27 12 27 27-12 27-27 27-27-12-27-27z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
  animation: drift 25s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(20px) translateY(-15px) rotate(2deg); }
  50% { transform: translateX(-10px) translateY(-10px) rotate(0deg); }
  75% { transform: translateX(15px) translateY(-20px) rotate(-1deg); }
}

.main-container {
  min-height: 100vh;
}

/* 动漫风格头部样式 */
.ancient-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 254, 251, 0.9) 100%);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(79, 214, 112, 0.2);
  box-shadow: var(--shadow-anime);
  height: 80px !important;
  position: relative;
  overflow: hidden;
}

/* 动漫风格的彩虹装饰条 */
.ancient-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4fd670, #7de89c, #a8f5c0, #c7f9d3, #87ceeb);
  animation: shimmer 3s ease-in-out infinite;
}

/* 头部装饰图案 */
.ancient-header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 80px;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='200' height='80' viewBox='0 0 200 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234fd670' fill-opacity='0.08'%3E%3Cpath d='M180 20l3 9h9l-7 5 3 9-8-6-8 6 3-9-7-5h9z'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3Cpath d='M170 60c0-3 2-5 5-5s5 2 5 5-2 5-5 5-5-2-5-5z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 2rem;
}

.greeting-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.greeting-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  color: var(--color-heading);
}

.welcome-prefix {
  font-weight: 600;
  color: var(--color-primary);
  position: relative;
}

.user-name {
  font-weight: 700;
  color: var(--color-accent);
  text-shadow: 0 1px 3px rgba(79, 214, 112, 0.3);
  position: relative;
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  0% { text-shadow: 0 1px 3px rgba(79, 214, 112, 0.3); }
  100% { text-shadow: 0 1px 3px rgba(79, 214, 112, 0.3), 0 0 10px rgba(125, 232, 156, 0.4); }
}

.user-title {
  font-size: 1rem;
  color: var(--color-text-secondary);
  background: var(--color-background-mute);
  padding: 4px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.decoration-line {
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), transparent);
  border-radius: 1px;
  width: 100px;
}

/* 清新退出按钮 */
.logout-btn {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: none;
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
  background: linear-gradient(135deg, #c0392b, #a93226);
}

/* 内容容器 */
.content-container {
  flex: 1;
}

/* 清新侧边栏 */
.ancient-aside {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(82, 181, 115, 0.2);
  box-shadow: 4px 0 20px rgba(82, 181, 115, 0.12);
  position: relative;
}

.ancient-aside::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #52b573, #7dd89b, #a8e6a3);
}

.nav-container {
  padding: 2rem 0;
  height: 100%;
}

.nav-title {
  text-align: center;
  padding: 0 2rem 2rem;
  position: relative;
}

.title-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-heading);
  display: inline-block;
  position: relative;
}

.title-decoration {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  margin: 12px auto;
  border-radius: 1px;
  width: 80%;
}

/* 古风菜单样式 */
.ancient-menu {
  border: none;
  background: transparent;
  padding: 0 1rem;
}

.ancient-menu-item {
  margin: 8px 0;
  border-radius: var(--border-radius);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transform-origin: left center;
}

/* 动漫风格的悬浮效果 */
.ancient-menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(79, 214, 112, 0.2), transparent);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ancient-menu-item:hover {
  background: var(--color-background-accent);
  transform: translateX(8px) scale(1.02);
  box-shadow: var(--shadow-anime);
  border-color: var(--color-primary);
  animation: pulse 1.5s ease-in-out infinite;
}

.ancient-menu-item:hover::before {
  left: 100%;
}

@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-anime); }
  50% { box-shadow: var(--shadow-hover); }
}

.ancient-menu-item.is-active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  border-color: var(--color-primary);
  transform: translateX(12px);
}

.ancient-menu-item.is-active .menu-text,
.ancient-menu-item.is-active .menu-icon {
  color: white;
}

.menu-icon {
  margin-right: 12px;
  font-size: 1.2rem;
  color: var(--color-primary);
  transition: all 0.3s ease;
}

.menu-text {
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.item-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ancient-menu-item:hover .item-decoration {
  transform: scaleX(1);
}

.ancient-menu-item.is-active .item-decoration {
  transform: scaleX(1);
  background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
}

/* 主要内容区域 */
.ancient-main {
  background: var(--color-background);
  padding: 2rem;
  min-height: calc(100vh - 80px);
  /* 确保内容区域正常显示 */
  position: relative;
  z-index: 1;
}

.content-wrapper {
  background: var(--color-background-soft);
  border-radius: calc(var(--border-radius) * 2);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  min-height: calc(100vh - 160px);
  position: relative;
  overflow: visible; /* 改为visible避免内容被隐藏 */
  /* 确保内容在装饰层之上 */
  z-index: 2;
}

/* 确保子元素正常显示 */
.content-wrapper > * {
  position: relative;
  z-index: 3;
}

.content-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
}

/* 樱花飘落动画效果 */
.content-wrapper::after {
  content: '🌸 🌸 🌸 🌸 🌸';
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.6;
  animation: sakura-fall 8s ease-in-out infinite;
  pointer-events: none;
  letter-spacing: 20px;
  z-index: 1; /* 确保在内容下方 */
}

@keyframes sakura-fall {
  0% { 
    transform: translateY(-50px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% { 
    transform: translateY(20px) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ancient-aside {
    width: 240px !important;
  }
  
  .header-content {
    padding: 0 1rem;
  }
  
  .greeting-text {
    font-size: 1.2rem;
  }
  
  .ancient-main {
    padding: 1rem;
  }
  
  .content-wrapper {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .ancient-aside {
    width: 200px !important;
  }
  
  .greeting-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .user-title {
    font-size: 0.9rem;
  }
}
</style>